CSS : Les principale valeurs de la propriété display

Lorsque vous définissez display: block; sur un élément, il s'affiche comme un bloc de texte autonome qui commence sur une nouvelle ligne et occupe toute la largeur disponible de son conteneur parent. Les éléments de type "block" ignorent généralement les propriétés de largeur et de hauteur spécifiées, à moins qu'elles ne soient explicitement définies.

Exemple :

div {
    display: block;
}
Copy

Lorsque vous définissez display: inline; sur un élément, il s'affiche en ligne avec le contenu adjacent. Les éléments en ligne ne commencent pas sur une nouvelle ligne et ne prennent que la largeur nécessaire pour afficher leur contenu. Cela signifie que vous pouvez placer plusieurs éléments en ligne côte à côte.

Exemple :

span {
    display: inline;
}
Copy

La valeur inline-block est une combinaison des propriétés inline et block. Les éléments inline-block s'affichent en ligne, mais vous pouvez définir leur largeur, leur hauteur et d'autres propriétés de boîte, ce qui les rend plus flexibles que les éléments inline normaux.

Exemple :

button {
    display: inline-block;
    width: 120px;
    height: 40px;
}
Copy

Lorsque vous définissez display: none; sur un élément, il est complètement caché et ne prend pas de place dans la mise en page. Cela peut être utile pour masquer temporairement des éléments de la page.

Exemple :

.hidden {
    display: none;
}
Copy

Il existe également des valeurs de display spécifiques à la création de mises en page en tableau, telles que table, table-row, table-cell, table-header-group, table-footer-group, etc. Ces valeurs sont utilisées pour créer des mises en page en tableau personnalisées en CSS.

Exemple :

.table {
    display: table;
}
.table-row {
    display: table-row;
}
.table-cell {
    display: table-cell;
}
Copy

Pour résumer, la valeur grid de la propriété display est utilisée pour créer un conteneur de grille (grid container) qui organise ses éléments enfants dans une grille bidimensionnelle. Cela signifie que vous pouvez disposer des éléments dans des lignes et des colonnes, créant ainsi des mises en page complexes et bien structurées.

Exemple :

.grid-container {
	display: grid;
	grid-template-columns: 1fr 2fr 1fr;
	grid-template-rows: auto;
	gap: 10px; 
}
Copy

Dans cet exemple, le conteneur de grille (grid-container) est configuré avec display: grid;. Les propriétés grid-template-columns et grid-template-rows définissent la structure de la grille, spécifiant le nombre de colonnes et de lignes et leur taille. La propriété gap définit l'espace entre les cellules de la grille.

Les dispositions de grille sont particulièrement utiles pour créer des mises en page de type tableau, des grilles de produits, des galeries d'images, et bien plus encore. Elles offrent un contrôle précis sur la disposition des éléments sur la page, mais c'est bien plus complet et complexe que ça, nous abordons tout ceci dans le cours dans le chapitre dédié aux grids.

Il existe moulte autres type de display, plus ou moins courant, mais de toute façon mon but n'est pas de tous les voir, vous avez ici ceux que j'utilise le plus souvent outre les flexbox. Si vous voulez en savoir plus, je vous invite à checker la doc en ligne tel que celle de developer.mozilla

#cours #blindcode #documentation #css

créé le 2023-09-17 à 15:25